<template>
  <n-card content-style="padding: 10px;" header-style="padding: 10px;" footer-style="padding: 10px">
    <template #header>
      待还款信用卡信息
      <n-tag :bordered="false" type="success" round>
        代还款总数:
      </n-tag>
    </template>
    <template #header-extra>
      <n-button circle>
        <template #icon>
          <n-icon>
            <i class="fa fa-refresh" />
          </n-icon>
        </template>
      </n-button>
    </template>
    <n-grid cols="1 s:2 m:3" responsive="screen" :y-gap="5" style="margin-bottom: 10px">
      <n-grid-item>
        <n-input-group>
          <n-select :style="{ width: '200px' }" :options="[{
          label: 'option',
          value: 'option'
        }]" />
          <n-input  placeholder="请输入搜索内容"/>
          <n-button  ghost>
            搜索
          </n-button>
        </n-input-group>
      </n-grid-item>
    </n-grid>
    <n-data-table
        :columns="columns"
        :data="data"
        min-height="250px"
        :bordered="false"
    />
    <n-pagination v-model:page="page.page" :item-count="page.itemCount" :page-count="page.pageCount" :page-slot="7" style="justify-content: center;margin-top: 5px"/>
  </n-card>
</template>

<script>
export default {
  name: "ShowDataTemplate",
  data(){
    return{
      columns:[
        {
          type: "expand",
          renderExpand: (rowData) => {
            return rowData.remarks
          }
        },
        {
          title: "ID",
          key: "creditCardId"
        },
        {
          title: "银行名称",
          key: "bankName",
        },
        {
          title: "还款时间",
          key: "repayTime",
        },
        {
          title: "创建时间",
          key: "creatTime",
        },
        {
          title: "还款金额",
          key: "repayAmount",
        },
        {
          title:'还款状态',
          key:'repayStatus',
        },
        {
          title:'操作',
          key:'option'
        }
      ],
      page:{
        page: 2,
        pageSize: 10,
        itemCount:100,
      }
    }
  }
}
</script>

<style scoped>

</style>